<template>
  <FormWithoutSetup
    ref="formRef"
    :rules="formData.rules"
    :form-data="formData.productInfo"
    :form-list="formList"
    :select-show="formData.selectShow"
    @submit="onSubmit"
    @reset="onReset"
  />
</template>

<script lang="ts" setup>
import {computed, onMounted, reactive, ref} from "vue";
import FormWithoutSetup from "@/components/common/FormWithoutSetup.vue";
import API from '@/api/socket'
import request from '@/utils/request'
import {showToast} from "@nutui/nutui";
import moment from "moment";

const formRef = ref(null)
const formData = reactive({
  productInfo: {
   costPrice: undefined,
   name: '',
   picturePath: '',
   fileList: undefined,
   productBrand: '',
   productCategory:  '',
   productCategoryText: undefined,
   purchaseDate:  moment().format('YYYY-MM-DD'),
   purchaseDateVal: new Date(),
   qrCode:  '',
   stockNumber: undefined,
   suggestedSellingPrice: undefined,
   type: '',
   typeText: undefined,
   upload: undefined
 },
  selectShow: {
    productCategory: false,
    type: false,
    purchaseDate: false
  },
  rules: {
    'productCategory': [{
      trigger: ['change'],
      required: true,
      message: '请选择商品类别'
    }],
    'name': [{
      trigger: ['blur'],
      required: true,
      message: '请输入商品名称'
    }],
    'productBrand': [{
      trigger: ['blur'],
      required: true,
      message: '请输入品牌名称'
    }],
    'type': [{
      trigger: ['change'],
      required: true,
      message: '请输选择材质'
    }],
    'suggestedSellingPrice': [{
      trigger: ['change','blur'],
      required: true,
      message: '请输入建议售价'
    }],
    'stockNumber': [{
      trigger: ['change','blur'],
      required: true,
      message: '请输入数量'
    }],
    'costPrice': [{
      trigger: ['change','blur'],
      required: true,
      message: '请输入成本价格'
    }],
    'purchaseDate': [{
      trigger: ['change'],
      required: true,
      message: '请选择进货时间'
    }],
  },
  options: {
    productCategory: [],
    type: []
  }
})

const formList = computed(() => [
  {
    type: 'select',
    name: '商品类别',
    prop: 'productCategory',
    value: 'productCategoryText',
    option: formData.options.productCategory,
  },
  {
    type: 'input',
    name: '商品名称',
    prop: 'name',
  },
  {
    type: 'input',
    name: '品牌名称',
    prop: 'productBrand',
  },
  {
    type: 'select',
    name: '材质',
    prop: 'type',
    value: 'typeText',
    option: formData.options.type,
  },
  {
    type: 'inputNumber',
    name: '建议售价',
    prop: 'suggestedSellingPrice',
    isDecimal: true,
  },
  {
    type: 'inputNumber',
    name: '数量',
    prop: 'stockNumber',
  },
  {
    type: 'inputNumber',
    name: '成本价格',
    prop: 'costPrice',
    isDecimal: true,
  },
  {
    type: 'inputTime',
    name: '进货时间',
    prop: 'purchaseDate',
    value: 'purchaseDateVal',
  },
  {
    type: 'upload',
    name: '文件上传',
    prop: 'picturePath',
    file: 'fileList'
  },
])

onMounted(()=> {
  request({
    url: API.getDictInfo,
    method:'get',
  }).then(res => {
    formData.options.productCategory = res.data.find((item: any) => item.type === 'category')
      ?.dictList?.map((dict: any) =>{
        return {
          text: dict.value,
          value: dict.code
        }
      })
    formData.options.type = res.data.find((item: any) => item.type === 'materialQuality')
      ?.dictList?.map((dict: any) =>{
        return {
          text: dict.value,
          value: dict.code
        }
      })
    })
})
const initFormData = () => {
  Object.keys(formData.productInfo).forEach((item: string) => {
    formData.productInfo[item] = undefined
    if (item === 'purchaseDate') formData.productInfo[item] = moment().format('YYYY-MM-DD')
    if (item === 'purchaseDateVal') formData.productInfo[item] = new Date()
  })
}

const onSubmit = (data: any) => {
  const params = {
    ...data,
    productCategoryText: undefined,
    purchaseDateVal: undefined,
    typeText: undefined,
    fileList: undefined,
    productCategory: data.productCategory ? data.productCategory[0] : undefined,
    type: data.type ? data.type[0] : undefined
  }
  try {
    request({
      url: API.saveProduct,
      method:'post',
      data: params
    }).then(res => {
      if (res['code'] === 200) {
        showToast.success('操作成功!')
      }
    })
    initFormData()
  } catch (e) {
    console.log("商品录入=>", e)
  }
}
const onReset= () => {
  initFormData()
}
</script>

<style scoped lang="scss">

</style>
